<template>

    <view class="orderPage allPage">
        <view class="headNav">
            <view class="ul">
                <view v-for="item,idx in titleNav" :key="idx" class="li" :class="{'active': idx == navIdx }" @click='switchTit(idx)'>{{item.name}}</view>
            </view>
        </view>

        <!-- //列表 -->
        <view class="list-box">

            <view v-for="item,idx in listData" :key="idx">
                <ExpressTemplate :listData="item" handle @handleClick="handleClick" />
            </view>

            <view class="nolist" v-if="showNodata && total == 0">
                暂未查询到相关订单
            </view>
        </view>
    </view>

</template>
<script>


import { statusList, DealOrderInfo } from '../../utils/configDIct.js'
import ExpressTemplate from '../../components/ExpressTemplate'

import Process from '../../utils/process'

const app = getApp();
export default {
    components: { ExpressTemplate },
    data () {
        return {
            titleNav: [
                { name: "待配送", code: [15] },
                { name: "配送中", code: [20] },
                { name: "已完成", code: [25] },
                { name: "全部", code: [] },
            ],
            navIdx: 0,
            searchArr: ['商标名称', '申请人', '申请号'],
            searchIdx: 0,
            searchkey: "",
            headHeight: 0,
            params: {},
            listData: [],
            orderStatus: '', //状态

            totalPage: 0,  //总页数
            showNodata: false,
            queryForm: {
                pageNum: 1, //第几页
                pageSize: 5
            },
            total: 0,
            statusList: statusList
        }
    },
    onLoad (option) {

        let index = 0

        if (option.status) {

            this.titleNav.map((item, idx) => {

                if (item.code[0] == option.status) {
                    index = idx
                }

            })
        }

        this.navIdx = index

        this.queryForm.orderStatusList = this.titleNav[index].code

        this.initPage()

    },
    methods: {
        initPage (cb) {
            this.$axios({ url: 'flash/supermarket/order/express/psry/page/list?loading', data: this.queryForm })
                .then(res => {

                    // console.log('哈哈哈哈', res)

                    // let data = res.data 

                    // if(  this.queryForm.pageNum == 1  ){

                    //     this.listData = data

                    // }
                    // else{
                    //     this.listData = this.listData.concat( data ) 
                    // }

                    this.$set(this.listData, this.queryForm.pageNum - 1, res.data)

                    this.total = res.total

                    this.showNodata = true

                    cb && cb()
                })
        },

        switchTit (i) {

            if (i != this.navIdx) {

                this.navIdx = i

                uni.pageScrollTo({
                    scrollTop: 0,
                    duration: 10
                });

                this.queryForm.pageNum = 1
                this.queryForm.orderStatusList = this.titleNav[i].code


                this.initPage()
            }
        },

        cancelOrder (item) {

            uni.showModal({
                // title: '标题',
                content: '是否取消此条订单？',
                showCancel: true,
                cancelText: '取消',
                confirmText: '确定',
                success: (res) => {

                    // console.log('812',res)
                    if (res.confirm) {
                        this.$axios({ url: `flash/supermarket/order/batch/del`, type: "POST", data: [item.id] })
                            .then((res) => {
                                if (res.code != 200) return
                                uni.showToast({
                                    title: '取消订单成功',
                                    icon: 'success',
                                    success: () => {

                                        this.pageNum = 1

                                        setTimeout(() => {
                                            this.initPage()
                                        }, 1000);
                                    }
                                });
                            })
                    }
                }
            });

        },

        //下拉刷新
        onPullDownRefresh () {

            this.queryForm.pageNum = 1


            this.initPage(() => {
                uni.stopPullDownRefresh();//停止刷新
            })

        },
        onReachBottom () {
            console.log('触底了')

            if (this.queryForm.pageNum * this.queryForm.pageSize < this.total) {

                this.queryForm.pageNum += 1

                this.initPage()
            }

        },
        handleClick (type, row) {
            console.log('点击类型', type)

            if (type == 'detail') {
                this.$goNext('./express-order-detail?id=' + row.id)
            }
            else if (type == 'start') {

                this.$goNext('./express-order-detail?id=' + row.id)

                // Process.deliveryExpressReceiving( row.id  )
                //     .then( res =>{

                //         console.log('开始配货了', res )

                //         this.initPage()

                //     })
            }
        }

    }
}
</script>
<style lang="scss" scoped>
.headNav {
    height: 80rpx;
    width: 100%;
}
.headNav .ul {
    display: flex;
    position: fixed;
    height: 80rpx;
    line-height: 80rpx;
    background: #fff;
    margin-bottom: 20rpx;
    box-sizing: border-box;
    padding: 0 24rpx;
    left: 0;
    top: 0;
    width: 100%;
    background: #ffffff;
    z-index: 10;
    border-bottom: 2rpx solid #eaeaea;
}
.headNav .li {
    width: 90rpx;
    margin: 0 20rpx;
    height: 100%;
    border-bottom: 4rpx solid #fff;
    text-align: center;
    box-sizing: border-box;
    font-size: 28rpx;
    transition: all 0.3s;
}

.headNav .active {
    color: #1989fa;
    border-bottom: 4rpx solid #1989fa;
}

.list-box {
    padding: 20rpx 32rpx 60rpx;
}

.nolist {
    margin-top: 100rpx;
    text-align: center;
    font-size: 28rpx;
    color: #565656;
}
</style>